<!--# layout("/common/layout.html",{"jsBase":"/js/cms/corePersonnel/"}){ -->

<form class="layui-form layui-form-pane" id="updateForm">
    <div class="layui-row">
        <div class="layui-form-item">
            <div class="layui-inline">
            <label class="layui-form-label">手机号码</label>
				<div class="layui-input-inline">
					<input type="text" id="code" name="code"  value="${corePersonnel.code}"   lay-verify="required|phone" class="layui-input" >
				</div>
            </div>
            <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
				<div class="layui-input-inline">
					<input type="text" id="userName" name="userName"  autocomplete = "off" value="${corePersonnel.userName}"   lay-verify="required" class="layui-input" >
				</div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="password" name="password"  autocomplete = "off"  class="layui-input" >
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label">所属企业</label>
                <div class="layui-input-inline">
                    <select name="comId" id="comId" class="layui-input"  lay-verify="required"></select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">用户状态</label>
                <layui:simpleDictSelect style='layui-input-inline' type="user_state"
                                        id="state" name="status" value="${corePersonnel.status}" />
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">证件有效期</label>
                <div class="layui-input-inline">
                    <input type="text" name="youxiaoqi"  value="${corePersonnel.youxiaoqi,'yyyy-MM-dd'}" class="layui-input input-date" readonly  lay-verify="required">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">职称</label>
                <div class="layui-input-inline">
                    <input type="text" name="zhichen"  value="${corePersonnel.zhichen}" class="layui-input" >
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row"> <label class="layui-form-label">人脸上传</label>
        <div class="ibox-content img-content">
                <div class="form-group " id="input-picture">
                    <div class="img-box" id="results">
                        <input name="img" id="image_code" type="hidden" value=""/>
                        <canvas id="canvas" width="300" height="260"></canvas>
                        <video id="video"  width="300" height="260">
                        </video>
                    </div>
                </div>
                <div class="form-group ">
                    <div class="input-but">

                        <button type="button" class="layui-btn" id="capture">
                            <i class="layui-icon">&#xe67c;</i>拍照
                        </button>
                        <button type="button" class="layui-btn" id="showVideo">
                            激活摄像头
                        </button>
                        <!--<button type="button" id="uppicture" class="layui-btn" >-->
                        <!--<i class="layui-icon">&#xe67c;</i>上传-->
                        <!--</button>-->
                    </div>
                </div>

        </div></div>
    <div class="layui-row">
        <label class="layui-form-label">身份证正面</label>
        <!-- 业务对象得有一个字段保存附件id，假设是attachmentId  -->
        <layui:attachment name="idCardPositive" batchFileUUID="${corePersonnel.idCardPositive!uuid()}" isNew="false" bizType="CoreUser"  />
    </div>
    <div class="layui-row">
        <label class="layui-form-label">身份证正面</label>
        <!-- 业务对象得有一个字段保存附件id，假设是attachmentId  -->
        <layui:attachment name="idCardOpposite" batchFileUUID="${corePersonnel.idCardOpposite!uuid()}" bizId="${corePersonnel.id}" isNew="false"  bizType="CoreUser"  />
    </div>
    <div class="layui-row">
        <label class="layui-form-label">社保</label>
        <!-- 业务对象得有一个字段保存附件id，假设是attachmentId  -->
        <layui:attachment name="shebao" batchFileUUID="${corePersonnel.shebao!uuid()}" isNew="false" bizId="${corePersonnel.id}"  bizType="CoreUser"  />
    </div>
    <div class="layui-row">
        <label class="layui-form-label">防雷检测资质</label>
        <!-- 业务对象得有一个字段保存附件id，假设是attachmentId  -->
        <layui:attachment name="zizhi" batchFileUUID="${corePersonnel.zizhi!uuid()}" isNew="false" bizId="${corePersonnel.id}" bizType="CoreUser"  />
    </div>
	<!-- 业务对象须有hidden字段，保存delFlag和version字段-->
	<input type="hidden" name="delFlag" value=${corePersonnel.delFlag} />
    <input type="hidden" name="id" value=${corePersonnel.id} />
    <input type="hidden" id="comidval" value=${corePersonnel.comId} />
    <layui:submitButtons id="updateButton" />
</form>
<!--#} -->
<script>
layui.use(['edit'], function(){
    var corePersonnelEdit = layui.edit
    corePersonnelEdit.init();
});

function getUserMedia(constraints, success, error) {
        if (navigator.mediaDevices.getUserMedia) {
            //最新的标准API
            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
        } else if (navigator.webkitGetUserMedia) {
            //webkit核心浏览器
            navigator.webkitGetUserMedia(constraints,success, error)
        } else if (navigator.mozGetUserMedia) {
            //firfox浏览器
            navigator.mozGetUserMedia(constraints, success, error);
        } else if (navigator.getUserMedia) {
            //旧版API
            navigator.getUserMedia(constraints, success, error);
        }
    }

    function success(stream) {
        //兼容webkit核心浏览器
        let CompatibleURL = window.URL || window.webkitURL;
        //将视频流设置为video元素的源
        console.log(stream);

        //video.src = CompatibleURL.createObjectURL(stream);
        video.srcObject = stream;
        video.play();
    }

    function error(error) {
    console.log(error);
        Common.info("访问摄像头失败，请使用IE浏览器");
    }

    //从 canvas 提取图片 image
    function convertCanvasToImage(canvas) {
        //新Image对象，可以理解为DOM
        var image = new Image();
        // canvas.toDataURL 返回的是一串Base64编码的URL
        // 指定格式 PNG
        image.src = canvas.toDataURL("image/png");
        return image;
    }

    function getnavigator() {

        if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
            //获取video宽高
            var v_height,v_width;
            var myvObj = document.getElementById("video");
            myvObj.addEventListener("loadedmetadata", function () {
                v_height = this.videoHeight;
                v_width =this.videoWidth;
                $('#canvas').attr('width',v_width);
                $('#canvas').attr('height',v_height);
            });
            //调用用户媒体设备, 访问摄像头
            getUserMedia({video : {width: 320, height: 240}}, success, error);
        } else {
            alert('不支持访问用户媒体');
        }
    }
    getnavigator();

    function showpicture(picture) {
        if($('#results').find('img').attr('src')){
            $('#results').find('img').attr('src',picture);
        }else{
            $('#results').append('<img src="'+picture+'"/>');
        }
        $('#video').css('display','none');
        $('#canvas').css('display','none');
        $('#showVideo').show();
        $('.picture').val(1);
    }

    function hidepicture() {
        $('#results').find('img').remove();
        getnavigator();
        $('#video').css('display','block');
        $('#canvas').css('display','none');
        $('#showVideo').css('display','none');

    }

    $('#showVideo').click(function () {
        $('#results').find('img').remove();
        $('#canvas').css('display','none');
        $('#video').css('display','block');
        $('#showVideo').css('display','none');
        getnavigator();
    });

    document.getElementById('capture').addEventListener('click', function () {
        let video = document.getElementById('video');
        let canvas = document.getElementById('canvas');
        let context = canvas.getContext('2d');
        context.drawImage(video, 0, 0);
        //获取网页中的canvas对象
        var mycans=$('canvas')[0];
        //调用convertCanvasToImage函数将canvas转化为img形式
        var img=convertCanvasToImage(mycans);
        if(img.src){
            $('#results').find('#image_code').val(img.src);
            $('#capture').text('重拍');
            $('#video').css('display','none');
            $('#canvas').css('display','block');
            $('#showVideo').show();
        }
    })
</script>
<style>
    .coach-price{display: none}
.input-but{display: inline-flex;}
#canvas{display: none}
#showVideo{display: none}
#input-picture{width:100%;}
</style>